<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main flow-form-main">
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack" :content="title"/>
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> {{ '提 交' }}
          </el-button>
          <el-button @click="goBack()"> {{ $t('common.cancelButton') }}
          </el-button>
        </div>
      </div>
      <el-tabs class="JNPF-el_tabs">
        <el-row :gutter="24" class="">
          <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px"
                   label-position="right">
            <template v-if="!loading">
              <el-col :span="14">
                <el-card class="mb-20" shadow="always" header="完成资产">
                  <el-col :span="24">
                    <JNPF-table v-loading="assetLoading" :data="assetList" :hasNO="false" style="height: 165px;">
                      <el-table-column prop="assetName" label="资产名称" align="left"/>
                      <el-table-column prop="assetCode" label="资产编码" align="left"/>
                      <el-table-column prop="detailedAddress" label="地址" align="left"/>
                    </JNPF-table>
                  </el-col>
                  <el-col :span="24" style="margin-top: 30px;">
                    <el-form-item label="附件"
                                  prop="attachmentUrls">
                      <JNPF-UploadFz v-model="dataForm.attachmentUrls"
                                     :fileSize="10" sizeUnit="MB" :limit="9" buttonText="点击上传">

                      </JNPF-UploadFz>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="完成时间"
                                  prop="completeDate">
                        <el-date-picker v-model="dataForm.completeDate"
                                        placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd"
                                        value-format="timestamp"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="简述"
                                  prop="sketch">
                      <el-input v-model="dataForm.sketch"
                                placeholder="请输入" :maxlength="500" :style='{"width":"100%"}' true type="textarea"
                                :autosize='{"minRows":4,"maxRows":4}'>

                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-card>
              </el-col>
              <el-col :span="10">
                <el-card class="mb-20" shadow="always" header="处置说明">
                  <el-col :span="24">
                    <div class="block">
                      <el-timeline>
                        <el-timeline-item
                          v-for="(disposeProcess, index) in disposeProcessList"
                          :key="index" placement="top"
                          :timestamp="disposeProcess.processEvent + '  ' + jnpf.dateFormat(disposeProcess.creatorTime)">
                          <el-card>
                            <el-col :span="24">
                              <el-form-item label="过程事件" style="text-align: left; margin-bottom: 0px;">
                                <p style="text-align: right">{{disposeProcess.processEvent}}</p>
                              </el-form-item>
                            </el-col>
                            <el-col :span="24">
                              <el-form-item label="经办人" style="text-align: left; margin-bottom: 0px;">
                                <p style="text-align: right">{{disposeProcess.processAgent}}</p>
                              </el-form-item>
                            </el-col>
                            <el-col :span="24">
                              <el-form-item label="简述" style="text-align: left; margin-bottom: 0px;">
                                <p style="text-align: right">{{disposeProcess.sketch}}</p>
                              </el-form-item>
                            </el-col>
                          </el-card>
                        </el-timeline-item>
                      </el-timeline>
                    </div>
                  </el-col>
                </el-card>
              </el-col>
            </template>
          </el-form>
          <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                        ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"/>
        </el-row>
      </el-tabs>
    </div>
  </transition>
</template>

<script>
import vueEsign from 'vue-esign'
import request from '@/utils/request'
import {getDataInterfaceRes} from '@/api/systemData/dataInterface'
import {getDictionaryDataSelector} from '@/api/systemData/dictionary'

export default {
  components: {},
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      btnLoading: false,
      selectDialogVisible: false,
      assetLoading: false,
      currTableConf: {},
      addTableConf: {},
      tableRows: {},
      currVmodel: "",
      assetList: [],
      disposeProcessList: [],
      dataForm: {
        completeDate: '',
        processAgent: '',
        attachmentUrls: [],
        sketch: '',
        assetDisposeId: '',
        type: 3,
      },
      rules:
        {
          completeDate: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],


        },

    }
  },
  computed: {
    title() {
      // if ([2, 3, 4].includes(this.setting.opType)) return this.fullName
      return this.thisStep ? this.fullName + '/' + this.thisStep : this.fullName
    }
  },
  watch: {},
  methods: {
    goBack() {
      this.$emit('close', false)
    },
    clearData() {
      this.dataForm.completeDate = '';
      this.dataForm.processAgent = '';
      this.dataForm.attachmentUrls = [];
      this.dataForm.sketch = '';
      this.dataForm.type = 3;
      this.dataForm.assetList = [];
      this.dataForm.disposeProcessList = [];
    },
    init(id) {
      this.dataForm.assetDisposeId = id || 0;
      this.visible = true;
      this.loading = false
      this.assetLoading = false
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields();
        if (this.dataForm.assetDisposeId) {
          this.assetLoading = true
          request({
            url: '/api/zc/ZcAssetDispose/queryAssetList',
            method: 'post',
            data: {id: this.dataForm.assetDisposeId}
          }).then(res => {
            this.assetList = res.data
            this.assetLoading = false
          });
          request({
            url: '/api/zc/ZcAssetDispose/queryDisposeProcessList',
            method: 'post',
            data: {id: this.dataForm.assetDisposeId}
          }).then(res => {
            this.disposeProcessList = res.data
            this.assetLoading = false
          });
        } else {
          this.clearData()
        }
      });
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          this.request()
        }
      })
    },
    request() {
      this.btnLoading = true
      let _data = this.dataList()
      request({
        url: '/api/zc/ZcAssetDispose/addDisposeProcessComplete',
        method: 'post',
        data: _data
      }).then((res) => {
        this.$message({
          message: res.msg,
          type: 'success',
          duration: 1000,
          onClose: () => {
            this.visible = false
            this.btnLoading = false
            this.$emit('refresh', false)
          }
        })
      }).catch(() => {
        this.btnLoading = false
      })
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key]
      this.currVmodel = key
      this.selectDialogVisible = true
      this.$nextTick(() => {
        this.$refs.selectDialog.init()
      })
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let item = {...this.tableRows[this.currVmodel], ...data[i]}
        this.dataForm[this.currVmodel].push(item)
      }
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      _data.attachmentUrls = Array.isArray(_data.attachmentUrls) ? JSON.stringify(_data.attachmentUrls) : '[]'
      _data.type = parseInt(_data.type)
      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      _dataAll.attachmentUrls = _dataAll.attachmentUrls ? JSON.parse(_dataAll.attachmentUrls) : []
      _dataAll.type = parseInt(_dataAll.type)
      this.dataForm = _dataAll
    },
  },

}
</script>
<style lang="scss" scoped>
.sign-main {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;

  .sign-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #dcdfe6;

    .sign-tip {
      color: #a5a5a5;
      font-size: 12px;
    }

    .sign-action {
      display: flex;
      align-items: center;

      .clear-btn,
      .sure-btn {
        margin-left: 5px;
      }
    }
  }

  .sign-box {
    border-top: 0;
    height: 100px;
  }

  .sign-img {
    width: 100%;
  }
}

.flow-form-main {
  .JNPF-el_tabs {
    overflow: hidden;
  }
}

.color-box {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
}

.flow-urgent-value {
  display: flex;
  align-items: center;

  span:first-child {
    margin: 0 3px 0 10px;
  }
}

.options {
  .dropdown {
    margin-right: 10px;
  }

  .el-button {
    min-width: 70px;
  }
}

.dropdown-item {
  min-width: 70px;
  text-align: center;
}
</style>
